Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add data-od-related-tag attribute to links to assist with debugging #1452

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

Add data-od-related-tag attribute to links to assist with debugging #1452

wants to merge 1 commit into from

Conversation

westonruter
Copy link
Member

@westonruter westonruter commented Aug 8, 2024 •
edited
Loading

When a preload or preconnect link is added, there currently isn't any indication from looking at the HTML for which element specifically caused the link to be added. Sure, it can be clear by looking at the href of the link and then just searching the HTML for that string elsewhere in the HTML to find the corresponding tag that the link is associated with. But we could make it more explicit by adding a data attribute to the link tag indicating the XPath of the related tag.

For example, a preload link added by Image Prioritizer for an LCP image:

<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="https://example.com/foo.jpg"
  media="screen and (max-width: 480px)"
  data-od-related-tag="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]"
>

Or a preconnect link added for an above-the-fold embed by Embed Optimizer:

<link
  data-od-added-tag
  rel="preconnect"
  href="https://i.ytimg.com"
  data-od-related-tag="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]"
>

I'm not totally sold on the need to do this, and perhaps this should only be done if WP_DEBUG is enabled, but I wanted to throw up a PR to get it off my mind.

Tests have not been updated to account for this new attribute.

@westonruter westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) labels Aug 8, 2024
@westonruter westonruter changed the title Add data-od-related-tag attributes to LINK to assist with debugging Add data-od-related-tag attribute to links to assist with debugging Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@felixarntz felixarntz Awaiting requested review from felixarntz felixarntz will be requested when the pull request is marked ready for review felixarntz is a code owner

@adamsilverstein adamsilverstein Awaiting requested review from adamsilverstein adamsilverstein will be requested when the pull request is marked ready for review adamsilverstein is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Type] Enhancement A suggestion for improvement of an existing feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@westonruter